<template>
  <div class="app-container" style="padding-top: 80px;">
    <!-- 添加修改 -->
    <el-form ref="ref" :rules="rules" :model="model" label-width="100px" class="dialog-body">
      <el-form-item label="标题" prop="title">
        <el-input v-model="model.title" placeholder="标题" clearable />
      </el-form-item>
      <!-- <el-form-item label="关键词" prop="keywords">
        <el-input v-model="model.keywords" placeholder="keywords" clearable />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="model.description" type="textarea" placeholder="description" clearable />
      </el-form-item>
      <el-form-item label="链接" prop="url">
        <el-input v-model="model.url" placeholder="url" clearable />
      </el-form-item>
      <el-form-item label="图片" prop="imgs">
        <el-row>
          <el-col :span="8">
            <el-button size="mini" @click="fileUpload('image', '上传图片')">上传图片</el-button>
          </el-col>
          <el-col :span="16">
            <div>每张图片大小不超过 1 MB。</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-for="(item, index) in model.imgs" :key="index" :span="6" class="ya-file">
            <el-image class="ya-img-form" :src="item.file_url" :preview-src-list="[item.file_url]" fit="contain" title="点击查看大图" />
            <div>
              <span class="ya-file-name" :title="item.file_name+'.'+item.file_ext">
                {{ item.file_name }}.{{ item.file_ext }}
              </span>
              <el-link :href="item.file_url" :underline="false" :download="item.file_url" target="_blank" class="ya-file-link">
                下载
              </el-link>
              <el-button size="mini" @click="fileImgDele(index)">删除</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form-item> -->

      <!-- <el-form-item label="附件" prop="files">
        <el-row>
          <el-col :span="8">
            <el-button size="mini" @click="fileUpload('word', '上传附件')">上传附件</el-button>
          </el-col>
          <el-col :span="16">
            <div>每个附件大小不超过 10 MB。</div>
          </el-col>
        </el-row>
        <el-row v-for="(item, index) in model.files" :key="index">
          <el-col :span="18" class="ya-file-name">
            <i v-if="item.file_type==='image'" class="el-icon-picture" />
            <i v-else-if="item.file_type==='audio'" class="el-icon-headset" />
            <i v-else-if="item.file_type==='video'" class="el-icon-video-play" />
            <i v-else-if="item.file_type==='word'" class="el-icon-document" />
            <i v-else class="el-icon-folder" />
            <span :title="item.file_name+'.'+item.file_ext">
              {{ item.file_name }}.{{ item.file_ext }}
            </span>
          </el-col>
          <el-col :span="6">
            <el-link :href="item.file_url" :underline="false" :download="item.file_url" target="_blank" class="ya-file-link">
              下载
            </el-link>
            <el-button size="mini" @click="fileFileDele(index)">删除</el-button>
          </el-col>
        </el-row>
      </el-form-item> -->

      <el-form-item label="内容" prop="content">
        <rich-editor v-model="model.content" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="cancel">取消</el-button> -->
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import api from '../../api'
import RichEditor from '@/components/RichEditor'
export default {
  components: { RichEditor },
  data() {
    return {
      model: {
        title: '',
        keywords: '',
        description: '',
        url: '',
        imgs: [],
        files: [],
        videos: [],
        content: '',
        sort: 250
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    submit() {
      api.notice.updateNotice(this.model).then(res => {
        if (res.err_no === 0) {
          this.$notify.success({
            title: '保存成功',
            message: res.err_msg
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    },
    fetchData() {
      api.notice.getNotice(this.query).then(res => {
        if (res.err_no === 0) {
          this.model = res.data
        } else {
          this.$notify.error({
            title: '错误',
            message: res.err_msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
